<template>
  <div class="table-container">
    <vxe-table
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      border
      height="280"
      :data="ctableData"
      style="width: 100%"
      :edit-config="{ trigger: 'dblclick', mode: 'row' }"
    >
      <vxe-table-column
        field="opt"
        title="项目"
        :edit-render="{ name: 'input' }"
      ></vxe-table-column>
      <vxe-table-column
        field="val"
        title="值"
        :edit-render="{ name: 'input' }"
      ></vxe-table-column>
    </vxe-table>
    <el-button type="primary" @click="save">设置故障</el-button>
    <el-button @click="recovery">恢复故障</el-button>
  </div>
</template>

<script>
export default {
  name: "compTable",
  // props: {
  //   ctableData: {
  //     type: Array,
  //     default: []
  //   }
  // },

  data() {
    return {
      // tableheader: [
      //   { prop: 'xzqm', label: '行政区码' },
      //   { prop: 'zddz', label: '终端地址' },
      //   { prop: 'zzdz', label: '主站地址' },
      //   { prop: 'zzzyip', label: '主站主用IP' },
      //   { prop: 'zzzydk', label: '主站主用端口' },
      //   { prop: 'zzbyip', label: '主站备用IP' },
      //   { prop: 'zzbydk', label: '主站备用端口' },
      //   { prop: 'zzapn', label: '主站APN' }
      // ]
      ctableData: [
        { opt: "行政区码", val: "" },
        { opt: "终端地址", val: "" },
        // { opt: '主站地址', val: '' },
        { opt: "主站主用IP", val: "" },
        { opt: "主站主用端口", val: "" },
        { opt: "主站备用IP", val: "" },
        { opt: "主站备用端口", val: "" },
        { opt: "主站APN", val: "" },
      ],
      loading: false,
    };
  },
  methods: {
    csearch() {
      this.loading = true;
      this.$axios
        .post(
          this.$URL + "/STerminalParameterSetup/list",
          this.$qs.stringify({ deviceId: 3 }, { indices: false })
        )
        .then((res) => {
          if (res.data.code === 0) {
            var a = res.data.data[0];
            var {
              districtCode,
              terminalAddress,
              // masterStationAddress,
              masterIp,
              masterPort,
              alternateIp,
              alternatePort,
              apn,
            } = a;
            var param = {
              districtCode,
              terminalAddress,
              // masterStationAddress,
              masterIp,
              masterPort,
              alternateIp,
              alternatePort,
              apn,
            };
            var obj;
            var valarr = [];
            for (let n in param) {
              valarr.push(param[n]);
            }
            this.ctableData = [
              { opt: "行政区码" },
              { opt: "终端地址" },
              // { opt: '主站地址' },
              { opt: "主站主用IP" },
              { opt: "主站主用端口" },
              { opt: "主站备用IP" },
              { opt: "主站备用端口" },
              { opt: "主站APN" },
            ];
            for (let i in this.ctableData) {
              this.ctableData[i].val = valarr[i];
            }
            this.loading = false;
          }
        });
    },
    save() {
      this.loading = true;
      let ctableData = this.ctableData;
      let keyarr = [
        "districtCode",
        "terminalAddress",
        // 'masterStationAddress',
        "masterIp",
        "masterPort",
        "alternateIp",
        "alternatePort",
        "apn",
        "id",
      ];
      let valarr = [];
      let obj = {};
      Object.keys(ctableData).forEach((key) => {
        valarr.push(ctableData[key].val);
      });
      valarr.push("3");
      for (let i in keyarr) {
        obj[keyarr[i]] = valarr[i];
      }
      this.$axios
        .post(this.$URL + "/SFault/JzqIpParm", this.$qs.stringify(obj))
        .then((res) => {
          if (res.data.code === 0) {
            delete obj.id;
            obj.deviceId = 3;
            this.$axios
              .post(
                this.$URL + "/STerminalParameterSetup/add",
                this.$qs.stringify(obj, { arrayFormat: "indices" })
              )
              .then((res) => {
                // console.log(res)
                if (res.data.code === 0) {
                  this.csearch();
                  this.loading = false;
                }
              });
            this.$notify({
              type: "success",
              message: "提交成功",
              position: "bottom-right",
            });
          } else {
            this.$notify({
              type: "error",
              message: "提交失败",
              position: "bottom-right",
            });
          }
        });
    },
    recovery() {
      this.loading = true;
      this.$axios
        .post(
          this.$URL + "/SDevice/selectTerminalParameter",
          this.$qs.stringify({ id: 3 })
        )
        .then((res) => {
          if (res.data.code === 0 && res.data.data !== null) {
            // console.log(res.data.data)
            var a = res.data.data;
            var {
              districtCode,
              terminalAddress,
              masterStationAddress,
              masterIp,
              masterPort,
              alternateIp,
              alternatePort,
              apn,
              id,
            } = a;
            var param = {
              districtCode,
              terminalAddress,
              masterStationAddress,
              masterIp,
              masterPort,
              alternateIp,
              alternatePort,
              apn,
              id,
            };
            this.$axios
              .post(this.$URL + "/SFault/JzqIpParm", this.$qs.stringify(param))
              .then((res) => {
                if (res.data.code === 0) {
                  delete param.id;
                  var obj;
                  var valarr = [];
                  for (let n in param) {
                    valarr.push(param[n]);
                  }
                  this.ctableData = [
                    { opt: "行政区码" },
                    { opt: "终端地址" },
                    { opt: "主站地址" },
                    { opt: "主站主用IP" },
                    { opt: "主站主用端口" },
                    { opt: "主站备用IP" },
                    { opt: "主站备用端口" },
                    { opt: "主站APN" },
                  ];
                  for (let i in this.ctableData) {
                    this.ctableData[i].val = valarr[i];
                  }
                  this.loading = false;
                  // console.log(this.ctableData)
                  // var optarr = [
                  //   '行政区码',
                  //   '终端地址',
                  //   '主站地址',
                  //   '主站主用IP',
                  //   '主站主用端口',
                  //   '主站备用IP',
                  //   '主站备用端口',
                  //   '主站APN'
                  // ]
                  // console.log(optarr[0])
                  // for (let i in optarr) {
                  //   console.log(optarr[i])
                  //   console.log(param[i])
                  //   obj = {}
                  //   obj.opt = optarr[i]
                  //   obj.val = param[i]
                  //   this.ctableData.push(obj)
                  // }
                  // console.log(this.ctableData)
                }
              });
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
<style lang="scss">
// .ctable {
//   display: flex !important;
//   flex-direction: row !important;
//   .el-table__header-wrapper {
//     display: inline-block;
//     width: 12.5rem /* 200/16 */;
//     th {
//       width: 12.5rem;
//     }
//   }
//   .el-table__body-wrapper {
//     display: inline-block;
//     width: calc(100% - 12.5rem);
//     .el-table__body {
//       width: 100% !important;
//       tbody {
//         width: 100%;
//         display: block;
//         tr {
//           width: 100%;
//           td {
//             width: 100%;
//           }
//         }
//       }
//     }
//     .el-table__empty-block {
//       width: 100% !important;
//       display: flex !important;
//       flex-direction: column !important;
//     }
//   }
//   table {
//     position: relative;
//     width: 100%;
//     display: block;
//   }
//   thead {
//     float: left;
//   }

//   tbody tr {
//     display: inline-block;
//   }

//   th, td {
//     height: 45px;
//     display: block;
//   }
// }
</style>
